//**
组件功能：同一个图片，先显示低质量的，然后过度到高质量的。
 */
<template>
    <div class="image-loader-container">
        <img v-if="!everthingDone" class="placeholder" :src="placeholderSrc" />
        <img @load="handleLoad" :src="highQualitySrc" :style="{opacity:opacity,transition:`${duration}ms`}">
        <!-- <img @load="handleLoad" :src="highQualitySrc" :style="{opacity:opacity,transition:'5s'}"> -->
    </div>
</template>
<script setup lang='ts'>
import { computed, ref } from 'vue';

    //#region define part
    defineOptions({
        name:'ImageLoader'
    });

    const emit = defineEmits<{
        load: [] // named tuple syntax
    }>()

    const props=defineProps({
        placeholderSrc:{
            type:String,
            required:true
        },
        highQualitySrc:{
            type:String,
            required:true
        },
        duration:{
            type:Number,
            default: 500
        }
    });
    //#endregion


    const everthingDone=ref(false);
    const highQualityLoaded=ref(false);

    const opacity=computed(()=>{
        return highQualityLoaded.value?1:0;
    })

    

    function handleLoad(){
        highQualityLoaded.value=true;
        setTimeout(()=>{
            everthingDone.value=true;
            emit('load');
        },props.duration)
    }
</script>
<style lang='less' scoped>
    .image-loader-container{
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        img{
            .self-fill();
            object-fit: cover;
        }
        .placeholder{
            filter: blur(2vw);
        }
    }
</style>